<script setup>



</script>
<template >
    <div class="page flex-row">
        <div class="info flex-row">
            <div class="info-contain flex-column">
                <div class="info-top flex-row">
                    个人信息
                </div>
                <div class="info-bottom">
                    <table class="info-table">
                        <tr class="info-table-tr">
                            <td class="info-table-td1 flex-row">姓名</td><td class="info-table-td2"></td>
                        </tr>
                        <tr class="info-table-tr">
                            <td class="info-table-td1 flex-row">学号</td><td class="info-table-td2"></td>
                        </tr> 
                        <tr class="info-table-tr">
                            <td class="info-table-td1 flex-row">班级</td><td class="info-table-td2"></td>
                        </tr> 
                    </table>
                </div>
            </div>
        </div>
        <div class="grade flex-row">
            <div class="info-contain flex-column">
                <div class="grade-top flex-row">
                    个人成绩
                </div>
                <div class="info-bottom">
                    <table class="info-table">
                        <tr class="info-table-tr">
                            <td class="info-table-td1 flex-row">内压成绩</td><td class="info-table-td2"></td>
                        </tr>
                        <tr class="info-table-tr">
                            <td class="info-table-td1 flex-row">外压成绩</td><td class="info-table-td2"></td>
                        </tr> 
                        <tr class="info-table-tr">
                            <td class="info-table-td1 flex-row">爆破成绩</td><td class="info-table-td2"></td>
                        </tr> 
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.page {
    width: 100%;
    height:100%;
}
.flex-column{
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}
.flex-row{
    display: flex;
    justify-content: center; 
    align-items: center;
}
.info {
    flex:1;
    height: 100%;
}
.info-contain {
    width: 440px;
    height: 416px;
}
.info-top {
    width: 146px;
    height: 46px;
    border-radius: 2px;
    background-color: rgb(122,199,86);
    font-size: 20px;
    color: white;
    margin-left: 180px;
}
.info-bottom {
    width: 470px;
    height: 281px;
}
.info-table {
    width: 470px;
    height: 281px;
    border-collapse: separate; /* 独立的边框模式 */
    border-spacing: 10px 35px; /* 水平和垂直间距，可以根据需要调整 */
}

.info-table-tr {
  height: 52px;
}
.info-table-td1 {
  color: black;
  height: 52px;
  width: 168px;
  font-size: 30px;
}
.info-table-td2 {
  border: 1px solid #808080;
  color: black;
  width: 260px;
  height: 52px;
  font-size: 30px;
  border-radius: 5px;
}
.grade {
    flex:1;
    height: 100%;
}
.grade-top {
    width: 146px;
    height: 46px;
    border-radius: 2px;
    background-color:rgb(189, 212, 239);
    font-size: 20px;
    color: rgb(78,160,255);
    margin-left: 180px;
    border: 1px solid rgb(78,160,255);
}
</style>
